{% block sw_pagination %}
<div
    v-if="shouldBeVisible"
    class="sw-pagination"
>
    {% block sw_pagination_page_prev %}
    <button
        :disabled="currentPage === 1"
        :aria-label="$tc('global.sw-pagination.previousPage')"
        class="sw-pagination__page-button sw-pagination__page-button-prev"
        @click="prevPage"
    >
        <mt-icon
            name="regular-chevron-left-xs"
        />
    </button>
    {% endblock %}

    {% block sw_pagination_page_list %}
    <ul class="sw-pagination__list">
        {% block sw_pagination_page_list_item %}
        <li
            v-for="(pageNum, index) in displayedPages"
            :key="index"
            class="sw-pagination__list-item"
        >
            {% block sw_pagination_page_list_item_button %}
            <button
                v-if="typeof(pageNum) === 'number'"
                :aria-label="$tc('global.sw-pagination.page', { page: pageNum })"
                class="sw-pagination__list-button"
                :class="{ 'is-active': currentPage === pageNum }"
                @click="changePageByPageNumber(pageNum)"
            >
                {{ pageNum }}
            </button>
            {% endblock %}

            {% block sw_pagination_page_list_item_separator %}
            <span
                v-else
                class="sw-pagination__list-separator"
            >
                {{ pageNum }}
            </span>
            {% endblock %}
        </li>
        {% endblock %}
    </ul>
    {% endblock %}

    {% block sw_pagination_page_next %}
    <button
        :disabled="currentPage === maxPage"
        :aria-label="$tc('global.sw-pagination.nextPage')"
        class="sw-pagination__page-button sw-pagination__page-button-next"
        @click="nextPage"
    >
        <mt-icon
            name="regular-chevron-right-xs"
            size="16px"
        />
    </button>
    {% endblock %}

    {% block sw_pagination_per_page_selection %}
    <div
        v-if="steps.length > 1"
        class="sw-pagination__per-page"
    >
        <mt-select
            size="small"
            name="perPage"
            :label="$tc('global.sw-pagination.labelItemsPerPage')"
            :model-value="String(perPage)"
            :options="possibleStepsOptions"
            hide-clearable-button
            @update:model-value="onPageSizeChange"
        />
    </div>
    {% endblock %}
</div>
{% endblock %}
